<script setup lang="ts">
import { showSuccessToast, type FieldRule, type FormInstance, showConfirmDialog } from 'vant'
import { watch } from 'vue'
import { ref } from 'vue'
import { patientAdd, patientUpdate, patientDel } from '@/api/user'
import type { patientAddReq } from '@/types/user'
const emits = defineEmits<{
  (e: 'getData'): void
}>()
const show = ref(false)
const options = [
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 0
  }
]
const formData = ref<patientAddReq>({
  name: '',
  idCard: '',
  gender: 1,
  defaultFlag: 0
})
const defaultFlag = ref(false)
// watch:侦听某些值的变化
/*
  const stop=watch('需要侦听的数据/[]/()=>对象.属性',(newVal,oldVal)=>{},{
    deep,
    immediate,
    flush:
        pre:渲染前执行回调函数
        post:渲染后
        sync:修改一次执行一次回调(渲染前)
  })
*/
watch(defaultFlag, newVal => {
  formData.value.defaultFlag = newVal ? 1 : 0
})

const rules = {
  name: [
    { required: true, message: '必填', trigger: 'onChange' },
    { pattern: /^.{2,32}$/, message: '请输入2-32位名字', trigger: 'onChange' }
  ] as FieldRule[],
  idCard: [
    { required: true, message: '必填', trigger: 'onChange' },
    {
      pattern:
        /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
      message: '请正确输入身份证号',
      trigger: 'onChange'
    }
  ] as FieldRule[]
}
const form = ref<FormInstance>()
const save = async () => {
  // ? 它只能用于get  不能用于set   !它没这个限制
  await form.value?.validate()
  if (mode.value === 'add') {
    // 调用新增接口
    await patientAdd(formData.value as patientAddReq)
    //   提示
    showSuccessToast('新增成功')
  } else if (mode.value === 'edit') {
    const { name, idCard, id = '', defaultFlag, gender } = formData.value as patientAddReq
    await patientUpdate({
      name,
      idCard,
      defaultFlag,
      id,
      gender
    })
    //   提示
    showSuccessToast('编辑成功')
  }
  //   关闭弹框
  show.value = false
  // 刷新列表
  emits('getData')
}
const closeEvent = () => {
  formData.value = {
    name: '',
    idCard: '',
    gender: 1,
    defaultFlag: 0
  }
  defaultFlag.value = false
  //   清空我们的表单验证处理
  setTimeout(() => {
    form.value?.resetValidation()
  }, 0)
}
const mode = ref<'add' | 'edit'>('add')

// 删除
const loading = ref(false)
const delEvent = async () => {
  // 确定框
  await showConfirmDialog({
    title: '温馨提示',
    message: '您确定删除该项吗?'
  })
  loading.value = true
  await patientDel(formData.value.id!)
  loading.value = false
  showSuccessToast('删除成功')
  show.value = false
  // 刷新列表
  emits('getData')
}
defineExpose({ show, mode, formData })
</script>

<template>
  <van-popup
    @close="closeEvent"
    v-model:show="show"
    position="right"
    style="width: 100%; height: 100%"
  >
    <cp-nav-bar
      @rightEvent="save"
      :title="{ add: '添加患者', edit: '编辑患者' }[mode]"
      right-text="保存"
      :back="() => (show = false)"
    ></cp-nav-bar>

    <van-form autocomplete="off" ref="form" class="form">
      <van-field
        :rules="rules.name"
        v-model="formData.name"
        label="真实姓名"
        placeholder="请输入真实姓名"
      />
      <van-field
        :rules="rules.idCard"
        v-model="formData.idCard"
        label="身份证号"
        placeholder="请输入身份证号"
      />
      <van-field label="性别" class="pb4">
        <!-- 单选按钮组件 -->
        <template #input>
          <cp-radio-btn :options="options" v-model="formData.gender"></cp-radio-btn>
        </template>
      </van-field>
      <van-field label="默认就诊人">
        <template #input>
          <van-checkbox v-model="defaultFlag" :icon-size="18" round />
        </template>
      </van-field>
    </van-form>
    <van-action-bar v-if="mode === 'edit'">
      <van-action-bar-button :loading="loading" text="删除" @click="delEvent" />
    </van-action-bar>
  </van-popup>
</template>

<style lang="scss" scoped>
.form {
  padding-top: 46px;
}
// 底部操作栏
.van-action-bar {
  padding: 0 10px;
  margin-bottom: 10px;
  .van-button {
    color: var(--cp-price);
    background-color: var(--cp-bg);
  }
}
</style>
